<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传并返回路径</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-strap.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css"/>

</head>
<body>
<div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">身份证正面照片:</label>
    <div class="col-sm-10">
            <input type="hidden" name="img" id="photoUrl"/>
            <input type="file" name="logoFile" id="logoFile" onchange="setImg(this);">
            <span><img id="photourlShow" src="" width="300" height="197"/></span>
    </div>
</div>

<div class="row">
    <a class="btn btn-primary" href="tempseal.html">印章管理</a>
    <a class="btn btn-primary" href="tempcreate.html">创建合同模板</a>
    <a class="btn btn-primary" href="hetongManage.html">合同管理</a>
</div>

<script>
    //用于进行图片上传，返回地址
    function setImg(obj) {
        var f = $(obj).val();
        alert(f);
        console.log(obj);
        if (f == null || f == undefined || f == '') {
            return false;
        }
        if (!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f)) {
            alert("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
            $(obj).val('');
            return false;
        }
        var data = new FormData();
        console.log(data);
        $.each($(obj)[0].files, function (i, file) {
            data.append('file', file);
        });
        console.log(data);
        $.ajax({
            type: "POST",
            //url: GLOBAL_INFO.WEBURL_PREFIX+"business/uploadImg.xhtml",
            url: window.location.href + "business/uploadImg.xhtml",
            data: data,
            cache: false,
            contentType: false,    //不可缺
            processData: false,    //不可缺
            dataType: "json",
            success: function (ret) {
                console.log(ret);
                if (ret.code == 0) {
                    $("#photoUrl").val(ret.result.url);//将地址存储好
                    $("#photourlShow").attr("src", ret.result.url);//显示图片
                    alert(ret.message);
                } else {
                    alert(ret.message);
                    $("#url").val("");
                    $(obj).val('');
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("上传失败，请检查网络后重试");
            }
        });
    }
</script>
</body>
</html>